{% extends "pythonems/s_base.html" %}
{% load i18n admin_static %}
{% block title %}个人中心{% endblock %}

{% block content %}
<script>
    
function set_profile(result, status) {
    "use strict";
    var user_profile = result.data[0];
    $("#first_name").val(user_profile.first_name);
    $("#last_name").val(user_profile.last_name);
    $("#email").val(user_profile.email);
    window.hideLoading();
}
    
function show_password () {
    "use strict";
    $("#password").addClass("hover");
    $("#password_container").show();
    $("#profile").removeClass("hover");
    $("#profile_container").hide();
}
    
$(document).ready(function () {
    "use strict";
    var pathname = window.location.pathname,
        path_reg = new RegExp('^/accounts/profile/(password/)?$'),
        reg_result = path_reg.exec(pathname);
    if (reg_result[1]) {
        show_password();
    }
    $("#profile").click(function () {
        "use strict";
        $("#password").removeClass("hover");
        $("#password_container").hide();
        $("#profile").addClass("hover");
        $("#profile_container").show();
    
    });
    $("#password").click(show_password);
    $.ajax({
        url: "/user/profile/",
        type: "GET",
        dataType: "json",
        async: true,
        success: set_profile
    });
    $("#submit_profile").click(function () {
        "use strict";
        window.loading();
        $.ajax({
            url: "/user/profile/",
            type: "PUT",
            dataType: "json",
            async: true,
            data: JSON.stringify({
                "first_name": window.trim($("#first_name").val()),
                "last_name": window.trim($("#last_name").val()),
                "email": window.trim($("#email").val())
            }),
            success: set_profile
        });
    });
});

</script>

<div id="content-main" class="index_body posi" style="min-height:400px;">
    <div class="space"></div>
    <div class="sub_hr"><div>
        <ur>
            <li id="profile" class="hover">资料修改</li>
            <li id="password" >密码修改</li>
        </ur>
        </div><div></div></div>
    <div class="space"></div>
    <div id="profile_container" style="margin: 0 auto; width:600px;">
        <table class="paper_new">
            <tr>
                <th>姓氏:</th>
                <td><input type="text" id="first_name"></input></td>
            </tr>
            <tr>
                <th>名字:</th>
                <td><input type="text" id="last_name"></input></td>
            </tr>
            <tr>
                <th>邮箱:</th>
                <td><input type="text" id="email"></input></td>
            </tr>
            <th colspan="2">
                <input type="submit" class="button" id="submit_profile" value="修改用户信息">
                </input>
            </th>
            <th colspan="2" id="submit_info">
            </th>
        </table>
    </div>
    <form id="password_container" style="margin: 0 auto; width:600px; display:none"
          action="" method="post">{% csrf_token %}
        <div>
        {% if form.errors %}
        <p class="errornote">
            {% if form.errors.items|length == 1 %}{% trans "Please correct the error below." %}{% else %}{% trans "Please correct the errors below." %}{% endif %}
        </p>
        {% endif %}

        <p>{% trans "Please enter your old password, for security's sake, and then enter your new password twice so we can verify you typed it in correctly." %}</p>

        <fieldset style="border-width:0px;" class="module aligned wide">

        <div class="form-row" style="margin-bottom: 12px;">
            {{ form.old_password.errors }}
            <label for="id_old_password" class="required">{% trans 'Old password' %}:</label>{{ form.old_password }}
        </div>

        <div class="form-row" style="margin-bottom: 12px;">
            {{ form.new_password1.errors }}
            <label for="id_new_password1" class="required">{% trans 'New password' %}:</label>{{ form.new_password1 }}
        </div>

        <div class="form-row" style="margin-bottom: 12px;">
            {{ form.new_password2.errors }}
            <label for="id_new_password2" class="required">{% trans 'Password (again)' %}:</label>{{ form.new_password2 }}
        </div>

        </fieldset>

        <div class="submit-row">
            <input type="submit" value="{% trans 'Change my password' %}" class="default button" />
        </div>
        <div style="height: 40px;"></div>
        <script type="text/javascript">
            document.getElementById("id_old_password").focus();
        </script>
        </div>
    </form>
</div>
{% endblock %}